import React, { useState } from "react";
import ReactEcharts from "echarts-for-react";
import "./index.scss";
import { TitleBar } from "../title-bar";
import { Card } from "../card";
import { IOuterConfirmStatisticsChart } from "src/interfaces";

export interface StatisticalOfConfirmDataType {
  value: number;
  name: string;
}

export const StatisticalOfConfirm = ({
  originData,
  type = "outerConfirmStatisticsChart",
}: {
  originData: IOuterConfirmStatisticsChart;
  type: "outerConfirmStatisticsChart";
}) => {
  const confirming = originData?.confirming,
    total = originData?.total;

  const data: StatisticalOfConfirmDataType[] = originData?.items?.map(
    (item) => {
      return {
        name: item?.name,
        value: item?.count,
      };
    }
  );
  const colorObj: any = {
    待确认: "#6D7E9D",
    已确认: "#6BDCAF",
    待修改: "#6495FA",
    已超期: "#F8C42D",
  };
  let color: string[] = [];

  data?.forEach((item) => {
    color.push(colorObj[item.name]);
  });

  const option = {
    tooltip: {
      trigger: "item", // 触发类型  'item'图形触发：散点图，饼图等无类目轴的图表中使用； 'axis'坐标轴触发；'none'：什么都不触发。
      backgroundColor: "rgba(0,0,0,0.8)", // 提示框浮层的背景颜色。
      borderWidth: 0, // 提示框浮层的边框宽。
      padding: 12, // 提示框浮层内边距，
      renderMode: "html",
      textStyle: {
        // 提示框浮层的文本样式。
        color: "#fff",
        fontWeight: "normal",
        fontSize: 12,
      },
      formatter: function (arg: any) {
        const circle = `<span style="margin-right:5px;display:inline-block;background:${arg.color};width:8px;height:8px;border-radius:50%;"></span>`;
        return `<div style="width:118px;">
                        <p style="margin-bottom:6px;">${circle}${arg.name}</p>
                        <p style="margin-bottom:6px;margin-left:12px;">确认项<span style="float:right;">${arg.value}</span></p>
                        <p style="margin-left:12px;">占比<span style="float:right;">${arg.percent}%</span></p>
                    </div>`;
      },
    },
    series: [
      {
        type: "pie",
        center: ["50%", "50%"],
        radius: "65%",
        color,
        label: {
          normal: {
            formatter: function (params: any) {
              return `{icon|●}${params.name}\n${params.value}个\t${params.percent}%\n\n`;
            },
            borderWidth: 20,
            borderRadius: 4,
            padding: [-10, -50, 0, -60],
            rich: {
              icon: {
                fontSize: 16,
                color: "inherit",
              },
            },
          },
        },
        labelLine: {
          normal: {
            length: 20,
            length2: 45,
            lineStyle: {
              color: "#8A909F",
            },
          },
        },
        data: data,
      },
    ],
  };

  return (
    <div className="statistical-of-confirm">
      <TitleBar name="确认统计">
        <span className="second-title">
          共{total}批次，{confirming}批次待确认
        </span>
      </TitleBar>
      <Card>
        <ReactEcharts
          style={{ width: "343px", height: "257px" }}
          option={option}
        />
      </Card>
    </div>
  );
};
